{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/buttongroup';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/buttongroup/package.json';

---
category: Buttons
keywords: [button group]
---

# ButtonGroup

<PageDescription>{docs.exports.ButtonGroup.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['ButtonGroup']}
  sourceData={[
    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/button-group/'}
  ]}
  since="3.0.0" />

## Example
```tsx example
import {ButtonGroup} from '@react-spectrum/buttongroup';
import {Button} from '@react-spectrum/button';

<ButtonGroup>
  <Button variant="primary">Rate Now</Button>
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
</ButtonGroup>
```

## Content
ButtonGroup expects [Buttons](./Button.html) as children and is used to handle overflow. When horizontal space is limited, the ButtonGroup switches to a vertical layout. ButtonGroup should be used when there are two or more related Buttons in a group.
To see the orientation switch in the example above, resize the width of your window.

## Props

<PropTable component={docs.exports.ButtonGroup} links={docs.links} />

## Visual options

### Orientation
[View guidelines](https://spectrum.adobe.com/page/button-group/#Orientation)

Setting this to 'vertical' will prevent any dynamic orientation changes, the ButtonGroup will remain in vertical regardless of the available width.
```tsx example
<ButtonGroup orientation="vertical">
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
  <Button variant="primary">Rate Now</Button>
</ButtonGroup>
```

### Alignment
[View guidelines](https://spectrum.adobe.com/page/button-group/#Align-button-groups-based-on-content)

Button groups are aligned contextually. Generally, button groups should be start-aligned to follow content. However, they should be end-aligned inside container components, such as in dialogs, popovers, or cards. Center alignment should be used in the context of an empty state. In right-to-left languages, alignment is flipped automatically.

```tsx example
<ButtonGroup orientation="vertical" align="end">
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
  <Button variant="primary">Rate Now</Button>
</ButtonGroup>
```

```tsx example
<ButtonGroup orientation="vertical" align="center">
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
  <Button variant="primary">Rate Now</Button>
</ButtonGroup>
```

### Disabled
[View guidelines](https://spectrum.adobe.com/page/button-group/#Disabled)

```tsx example
<ButtonGroup isDisabled>
  <Button variant="secondary">No, thanks</Button>
  <Button variant="secondary">Remind me later</Button>
  <Button variant="primary">Rate Now</Button>
</ButtonGroup>
```
